<template>
  <!-- 训练营列表 -->
  <div>
    <new-search-bar searchFixed="true" bgSearch="c-bg-white c-pt24-i" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <div class="c-ph24" :class="campList.length >= 10 ? 'c-pb80' : ''">
      <div class="c-flex-row c-pv24 c-bd-b1" @click="clickGoTrainingDetail(item.id)" v-for="(item,index) in campList" :key="index">
        <div class="c-ww210 c-hh140 c-text-hidden c-p c-br12">
          <CoverImg :coverSizeClass="'c-w100 c-h c-text-hidden' + ((themeName == 'mb3' || themeName == 'mb4' ) ? 'c-br16' : '')" :imgClass="(themeName == 'mb3' || themeName == 'mb4' ) ? 'c-br16' : ''" :coverUrl="$addXossFilter(item.cover, require('@/assets/defult270.png'))" />
          <div class="timeShow" v-if="item.termStatus == 1 || ([4, 5, 6].includes(item.termStatus) && item.isEnroll)">
            <div v-if="item.termStatus == 1">
              距报名
              <cj-clocker :time="timeFn(index)" format="%D天%H小时" @on-finish="finishFn(index)"></cj-clocker>
            </div>
            <div v-if="[4, 5, 6].includes(item.termStatus) && item.isEnroll">已完成{{Number(item.progress * 100).toFixed(0)}}%</div>
          </div>
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-lh34">{{item.name}}</div>
          <div class="c-flex-row c-aligni-center c-justify-sb">
            <div class="c-flex-row c-aligni-center c-flexw-wrap c-lh26">
              <span class="c-fc-xmlred c-fw600">
                <span v-if="item.payType == 2 || item.payType == 4" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                <span :class="checkCnPrice(item.payType, item.price, 78) ? 'c-fs22' : 'c-fs26'">{{item.payType | priceValueFilter(item.price, 78, item.optimal, 'index')}}</span>
              </span>
              <span v-if="isShowcrossedPrice(item)" class="c-lh18 c-fs18 c-fc-gray c-text-decoration-through c-ml10">￥{{getCrossedPrice(item)}}</span>
            </div>
            <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-fs20 c-fc-gray">{{item.people}}人报名</div>
          </div>
        </div>
      </div>
      <loading-status-tem :showLoading="isLoading" :noMoreData="is_page == false && (campList && campList.length > 0)" :noData="campList.length == 0" :noDataText="'暂无结果'"></loading-status-tem>
    </div>
    <nav-bottom-bar :itemIndex="19" v-if="showNavBottomBar"></nav-bottom-bar>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js"
export default {
  name: "CampList",
  components: {
    loadingStatusTem,
    NavBottomBar,
    newSearchBar,
    CoverImg
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      campList: [],
      showNavBottomBar: false,
      is_page: false,
      page: 1,
      limit: 10,
      searchText: '',
      isLoading: false,
      proType: -1,
      proId: -1,
      tabType: 1,
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      cfg: JSON.parse(localStorage.getItem("cfg")),
      ckFrom: global.ckFrom.camp,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  computed: {
    // 判断显示划线价格
    isShowcrossedPrice() {
      return function(item) {
        return !this.$isWxAppIos() && item.crossedPrice && Number(item.crossedPrice) > 0;
      }
    },
    // 获取划线价格
    getCrossedPrice() {
      return function(item) {
        return item.crossedPrice;
      }
    }
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    this.isLoading = false;

    this.proType = this.$route.query.proType || "";
    this.proId = this.$route.query.proId || "";
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
      let arrCampFilter = this.companyAuth.companyNav.filter((item) => {
        return item.navType == 19;
      });
      this.showNavBottomBar = arrCampFilter.length > 0;
    }
    setDocumentTitle("训练营列表");
    if (utilJs.checkNeedInitData(this.campList)) {
      this.initData()
    }
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  mounted() {

  },
  methods: {
    checkCnPrice(payType, price, prodType) {
      return utilJs.checkCnPrice(payType, price, prodType)
    },
    initData() {
      this.page = 1;
      this.is_page = false;
      this.searchText = '';
      this.campList = [];
      this.getMore();
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    timeFn: function (index) {
      //status 1.待招生、2.招生中、3.待开课、4.开课中、5.已结束、6.招生中/开课中
      let stime = this.campList ? utilJs.getTimeByDate(this.campList[index].enrollStartAt) : 0;
      let time = '';
      if (this.campList[index].termStatus == 1) {
        time = stime;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.campList[index].status == 1) {
        this.campList[index].status = 2;
      } else {
        this.campList[index].status = 3;
      }
    },
    startSearch(e) {
      this.page = 1;
      this.campList = [];
      this.searchText = e.searchValue;
      utilJs.toPageScrollTop();
      this.getMore();
    },
    clickGoTrainingDetail(id) {
      let toPath = `/homePage/camp/campDetail?campId=${id}&ckFrom=${global.ckFrom.camp}`;
      this.iosAppRouteChange(toPath);
    },
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(`${global.apiurl}k12/trainings?name=${this.searchText}&page=${this.page}&limit=${this.limit}`, res => {
          this.isLoading = false;
          this.campList = this.campList.concat(res.data);
          this.page = res.data && (res.data.length >= this.limit) ? (this.page + 1) : this.page;//res.current_page < res.last_page ? (this.page + 1) : this.page;
          this.is_page = res.data && (res.data.length >= this.limit) ? true : false;//res.current_page < res.last_page ? true : false;
        }, failRes => {
          this.isLoading = false;
        });
      }
    },
    //分享
    wechatShare: function () {
      let title = "训练营列表";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "训练营列表";
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: .7rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .15rem 0;
}
</style>